<template>
    <div>
        展示在线用户:<br>
        <ul>
            <li v-for="i in userlist">
              <el-button @click="choseid(i.id)">{{ i.name }}</el-button>  
            </li>
        </ul>
      <el-input v-model="msg"></el-input>
      <el-button @click="submit">提交</el-button>
      聊天内容展示:
      <ul>
          <li v-for="i in meslist">{{ i }}</li>
      </ul>
      
    </div>
  </template>
  
  <script>
  export default {
      data(){
          return{
              userid:"",
              ws:null,
              msg:"",
              username:"",
              meslist:[],
              userlist:[],
              chseid:""
          }
      },
      methods:{
          initw(){
              this.userid=this.$route.query.userid
              this.username="客服:"+this.userid
              this.ws=new WebSocket("ws://localhost:8000/ws?userid="+this.userid+"&name="+this.username)
              this.ws.onopen=function(){
                  alert("success")
              }
              this.ws.onmessage=(msg)=>{
                  var mes=JSON.parse(msg.data)
                  this.meslist.push(mes["mes"])
                  this.userlist=mes["userlist"]
              }
          },
          submit(){
            if(this.chseid){
                var mes=this.username+"说:"+this.msg
                this.meslist.push(mes)
                var sendmes=JSON.stringify({"id":this.chseid,"mes":mes})
                this.ws.send(sendmes)
            }else{
                alert("必须选择用户")
            }
        },
        choseid(id){
            this.chseid=id
        }   
              
      },
      mounted(){
        this.initw()
      }
  }
  </script>
  
  <style>
  
  </style>